import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import "./index.scss"
interface ParentProps {
    message: any;
}
const LineChart = (props: ParentProps) => {
    const { message } = props;
    console.log(message);

    var main1: any = null;
    useEffect(() => {
        main1 = initEcharts('main1', '', [], []);
    }, [])
    var initEcharts = (dom: any, title: any, xAxis: any, series: any) => {

        var myChart = echarts.init(document.getElementById(dom) || document.body);
        const month = ['6/16', '6/17', '6/18', '6/19', '6/20', '6/21', '6/22', '6/23'];
        const dateList = month.map(function (item) {
            return item[0];
        });
        myChart.setOption({
            visualMap: [
                {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400
                },
                {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                    max: dateList.length - 1
                }
            ],
            title: {
                text: '销售额趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销售额', '毛利率']
            },
            xAxis: {
                type: 'category',
                // boundaryGap: false,
                data: month
            },
            yAxis: {
                type: `value`
            },
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    showSymbol: false,
                    data: [190, 100, 191, 134, 200, 130, 250, 100]
                },
                {
                    name: '毛利率',
                    type: 'line',
                    showSymbol: false,
                    data: [150, 102, 131, 80, 190, 50, 210, 160]
                }
            ]
        });
        return myChart;
    }
    return (
        <div className='linechart'>
            <div id="main1">

            </div>
        </div>
    );
};

export default LineChart;